import * as echarts from 'echarts';
import { deepMerge } from './util';

// 基础折线图
class LineBase {
  constructor(container, options) {
    this.container = container;
    this.options = deepMerge({}, options);
    this.initChart();
  }
  initChart() {
    if (!this.chart) {
      this.chart = echarts.init(this.container);
    }
  }

  updateOptions() {
    this.chart.setOption(
      {
        legend: {
          bottom: '10%',
          itemGap: 400,
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
          data: this.data.legend,
        },
        grid: {
          top: 50,
          left: 50,
          right: 80,
          bottom: 80,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          extraCssText:
            'padding-left:24px;line-height:25px;width:190px;height:100px;background: rgba(0,24,42,0.8);border:1px solid;color:#fff;border-image: linear-gradient(180deg, rgba(124, 184, 255, 1), rgba(124, 231, 255, 1)) 1 1;',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            fontSize: '14',
            color: '#666',
          },
          formatter: (params) => {
            var str = ''; //声明一个变量用来存储数据
            str += '<div>' + params[0].name + '</div>';
            for (var i = 0; i < params.length; i++) {
              str +=
                '<span style="display:inline-block;font-size: 14px;">' +
                params[i].seriesName +
                '：</span>' +
                '<span style="display:inline-block;width:40px;font-size: 14px;text-align:right;color: #3DDEFF;margin-right:5px">' +
                params[i].value +
                '</span>' +
                '</br>';
            }
            return str;
          },
        },
        xAxis: {
          data: this.data.xData,
          axisLabel: {
            //坐标轴标签样式
            color: 'rgba(255,255,255,0.8)',
            fontSize: 16,
          },
          axisTick: {
            //刻度线
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#43ECFF',
            },
          },
        },
        yAxis: [
          {
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.15)',
              },
            },
            axisLine: {
              //坐标轴线
              show: false,
            },
            axisLabel: {
              fontSize: 16,
              color: 'rgba(255,255,255,0.8)',
            },
          },
        ],
        series: [
          {
            name: this.data.legend[0],
            type: 'line',
            data: this.data.yData1,
            symbol:
              'image://',
            symbolSize: 18,
            smooth: true,
            color: '#00A7FF',
            lineStyle: {
              width: 2,
              color: '#1AFFFC',
            },
          },
          {
            name: this.data.legend[1],
            type: 'line',
            data: this.data.yData2,
            symbol:
              'image://',
            symbolSize: 18,
            smooth: true,
            color: '#00A7FF',
            lineStyle: {
              width: 2,
              color: '#3BA9FE',
            },
          },
        ],
      },
      true,
    );
  }

  setData(data, options = {}) {
    this.data = data;
    this.options = deepMerge({}, this.options, options);
    this.updateOptions();
  }

  destroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
}

export default LineBase;
